<template>
  <div class="smart-box">
    <!-- 防汛责任人 -->
    <div class="response">
      <common-title :title="'防汛责任人'"></common-title>
      <div class="item">
        <span>行政责任人</span>
        <span title="李润-镇长">李润-镇长</span>
        <span>13903481882</span>
      </div>
      <div class="item">
        <span>技术责任人</span>
        <span title="董佰阳-站长">董佰阳-站长</span>
        <span title="13835937320">13835937320</span>
      </div>
      <div class="item">
        <span>巡查责任人</span>
        <span title="李迎陪-管护员">李迎陪-管护员</span>
        <span title="18295958885">18295958885</span>
      </div>
    </div>
    <!-- 洪水过程线 -->
    <div class="water">
      <common-title :title="'洪水过程线'">
        <template #default>
          <div class="btns">
            <div
              class="btn"
              :class="{ active: isRealtime }"
              @click="isRealtime = true"
            >
              实时
            </div>
            <div
              class="btn"
              :class="{ active: !isRealtime }"
              @click="isRealtime = false"
            >
              预报
            </div>
          </div>
        </template>
      </common-title>
      <!-- 预报洪水过程线 -->
      <div id="processChart" v-show="!isRealtime"></div>
      <!-- 实时洪水过程线 -->
      <div
        id="waterChart"
        v-show="isRealtime"
        @click="showChartDialogByHSGCX"
      ></div>
    </div>
    <!-- 实时监测数据 -->
    <div class="testData" @click="showChartDialogBySSJCSJ">
      <common-title :title="'实时监测数据'"></common-title>
      <div id="positionCharts"></div>
    </div>
    <!-- 防汛预案 -->
    <div class="prevent">
      <common-title :title="'防汛预案'"></common-title>
      <ul class="item">
        <li
          v-for="(item, index) in listData"
          :key="index"
          :class="{ isJS: index % 2 == 0 }"
        >
          <div v-if="item.fxyawb">
            <span class="stitle">{{
              index + 1 + "、" + item.fxyawb &&
              item.fxyawb.split("/")[3].split(".")[0]
            }}</span>
            <span class="scontent" style="margin-left: 20px">{{
              item.fxyabzsj
            }}</span>
          </div>
          <div class="stitle" v-else style="width: 100%; text-align: center">
            暂无数据
          </div>
        </li>
      </ul>
    </div>
  </div>

  <chart-dialog
      v-if="showChartDialog"
      :type="currentType"
      @closeChartDialog="showChartDialog = false"
    />
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import commonTitle from "../../components/common-title/index.vue";
import chartDialog from "../../components/chart-dialog/index.vue";
import * as echarts from "echarts";

let isRealtime = ref(true);
let listData = reactive([
  {
    fxyawb: "1234/32/4/1.pdf",
    fxyabzsj: "杨家门大型坝防汛预案",
  },
]);
let showChartDialog = ref(false);
let currentType = ref("currentType");
let xAxis = [
  "4:00",
  "4:30",
  "5:00",
  "5:30",
  "6:00",
  "6:30",
  "7:00",
  "7:30",
  "8:00",
  "8:30",
  "9:00",
  "9:30",
  "10:00",
  "10:30",
];
let outYAxis = [
  0, 0.01, 0.16, 1.4, 6.91, 16.33, 25, 29.02, 22, 15.66, 10, 5, 3, 2,
];
let inYAxis = [
  0, 0.78, 6.27, 21.18, 53.33, 78.43, 61.17, 29.02, 14.12, 7.06, 3.14, 1.57,
  0.78, 0.0,
];

let inArr:any = [];
let outArr:any = [];
for (let index = 0; index < inYAxis.length; index++) {
  const element = inYAxis[index];
  inArr.push(parseFloat((element * 0.6).toFixed(2)));
  const ele = outYAxis[index];
  outArr.push(parseFloat((ele * 0.6).toFixed(2)));
}

onMounted(() => {
  loadRealtimeHSGCX(
    xAxis,
    inArr,
    outArr,
    document.getElementById("waterChart")
  );
  loadRealtimeJCSJ();
});

watch(isRealtime, (newVal: boolean) => {
  if (newVal) {
    loadRealtimeHSGCX(
      xAxis,
      inArr,
      outArr,
      document.getElementById("waterChart")
    );
  } else {
    loadRealtimeHSGCX(
      xAxis,
      inYAxis,
      outYAxis,
      document.getElementById("processChart")
    );
  }
});
let myChart1: any = null;
const loadRealtimeHSGCX = (
  xAxis: Array<string>,
  inYAxis: Array<number>,
  outYAxis: Array<number>,
  dom: HTMLElement | null
) => {
  if (myChart1) {
    myChart1.dispose();
  }
  const option = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(255,255,255,0)",
      borderWidth: 0,
      axisPointer: {
        type: "line",
        lineStyle: {
          type: "dashed",
          color: "#89939F",
        },
      },
      formatter: (params: any) => {
        return `<div style='background: #071027; padding: 0 20px;'><div style="color: #b0ee94; font-weight: 700;">入库：${params[0].value}m³/s</div><div style="color: #ff5656; font-weight: 700;">出库：${params[1].value}m³/s</div></div>`;
      },
    },
    legend: {
      right: "0%",
      textStyle: {
        color: "#ffffff",
      },
    },
    grid: {
      top: "20%",
      left: "1%",
      right: "5%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: "#306269",
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: "#C1C5CB",
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: xAxis,
    },
    yAxis: {
      type: "value",
      name: "F(m³/s)",
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#233e64",
        },
      },
      axisLine: { show: false },
      axisLabel: {
        textStyle: {
          color: "#C1C5CB",
        },
      },
    },
    series: [
      {
        name: "入库洪水过程线",
        type: "line",
        smooth: true,
        lineStyle: {
          normal: {
            color: "#b0ee94", // 线条颜色
          },
        },
        data: inYAxis,
      },
      {
        name: "出库洪水过程线",
        type: "line",
        smooth: true,
        lineStyle: {
          normal: {
            color: "#ff5656", // 线条颜色
          },
        },
        data: outYAxis,
      },
    ],
  };
  myChart1 = echarts.init(dom);
  myChart1.setOption(option);
};
let myChart2: any = null;
const loadRealtimeJCSJ = () => {
  const yAxisStart = 586.3;
  let bdgc = 602.1;
  // 校核水位
  let jhsw = 600;
  // 设计水位
  let sjsw = 599.1;
  // 实测水位
  let scsw = 602.1;
  myChart2 = echarts.init(document.getElementById("positionCharts"));

  const option = {
    grid: {
      top: "12%",
      left: "4%",
      right: "4%",
      bottom: "8%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: false,
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      min: yAxisStart,
      max: bdgc,
      interval: 6,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: "line",
        name: "坝高",
        z: 5,
        lineStyle: {
          normal: {
            color: "#FFFFFF",
            shadowColor: "#229AFF",
            shadowBlur: 10,
          },
        },
        areaStyle: {
          normal: {
            color: "RGBA(16, 30, 56, 1)",
            shadowBlur: 10,
            shadowColor: "#229AFF",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 1,
          },
        },
        data: [
          [0, yAxisStart],
          [1, yAxisStart],
          [2, yAxisStart + 15.8 / 2],
          [3, bdgc],
          [4, bdgc],
          [5, bdgc],
          [6, yAxisStart + 15.8 / 2],
          [7, yAxisStart],
        ],
        symbol: "none",
      },
      {
        type: "line",
        name: "坝顶高程",
        z: 6,
        lineStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
          },
        },
        label: {
          show: true,
          position: "top",
          offset: [20, 0],
          formatter: function (params: any) {
            if (params.dataIndex == 4) {
              return "▼ " + params.seriesName + "：" + bdgc + "m";
            } else {
              return "";
            }
          },
          color: "#CCC",
          fontSize: "15",
          fontFamily: "YSBTH",
        },
        itemStyle: {
          color: "rgba(0,0,0, 0)",
        },
        data: [
          [0, 0],
          [1, 0],
          [2, 0],
          [3, bdgc],
          [4, bdgc],
        ],
      },
      {
        type: "bar",
        z: 6,
        barWidth: 2,
        itemStyle: {
          color: "#fff",
        },
        data: null,
      },
      {
        type: "bar",
        z: 6,
        barWidth: 2,
        itemStyle: {
          color: "#fff",
        },
        data: null,
      },
      {
        type: "line",
        name: "实测",
        z: 4,

        lineStyle: {
          normal: {
            color: "white",
          },
        },
        areaStyle: {
          color: "rgba(15, 155, 242, 1)",
        },
        label: {
          show: true,
          position: "bottom",
          formatter: function (params: any) {
            if (params.dataIndex == 1 && scsw > 0) {
              return "▲ " + params.seriesName + "：" + scsw + "m";
            } else {
              return "";
            }
          },
          overflow: "truncate",
          color: "white",
          fontSize: "13",
        },
        data:
          scsw > 0
            ? [
                [0, scsw],
                [1, scsw],
                [2, scsw],
                [3, scsw],
              ]
            : [],
      },
      {
        type: "line",
        name: "校核水位",
        label: {
          show: true,
          position: "top",
          formatter: function (params: any) {
            if (params.dataIndex == 1) {
              return "▼ " + params.seriesName + "：" + jhsw + "m";
            } else {
              return "";
            }
          },
          color: "red",
          fontSize: "13",
        },
        z: 2,
        lineStyle: {
          normal: {
            type: "dashed",
            color: "red",
          },
        },
        data: [
          [0, jhsw],
          [1, jhsw],
          [2, jhsw],
          [3, jhsw],
        ],
      },
      {
        type: "line",
        name: "设计水位",
        z: 2,
        lineStyle: {
          normal: {
            type: "dashed",
            color: "yellow",
          },
        },
        label: {
          show: true,
          position: "bottom",
          formatter: function (params: any) {
            if (params.dataIndex == 1) {
              return "▲ " + params.seriesName + "：" + sjsw + "m";
            } else {
              return "";
            }
          },
          overflow: "truncate",
          color: "yellow",
          fontSize: "13",
        },
        data: [
          [0, sjsw],
          [1, sjsw],
          [2, sjsw],
          [3, sjsw],
        ],
      },
    ],
  };
  myChart2.setOption(option);
};

const showChartDialogByHSGCX = () => {
  showChartDialog.value = true;
  currentType.value = "1";
};

const showChartDialogBySSJCSJ = () => {
  showChartDialog.value = true;
  currentType.value = "2";
};
</script>

<style lang="less" scoped>
.smart-box {
  padding-left: 15px;
  box-sizing: border-box;
  .response {
    font-family: "PingFangReg";
    .item {
      display: flex;
      font-size: 16px;
      line-height: 28px;
      width: 100%;
      white-space: nowrap;
      span {
        flex: 3;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        padding-right: 5px;
        &:nth-child(1) {
          flex: 2;
        }
      }
    }
  }

  .water {
    position: relative;
    #processChart,
    #waterChart {
      width: 22vw;
      height: 201px;
      box-sizing: border-box;
    }
    span {
      position: absolute;
      top: 54%;
      left: 45%;
      transform: translate(-50%, -50%);
    }
    .btns {
      display: flex;
      margin-left: 9px;
      .btn {
        width: 51px;
        height: 24px;
        line-height: 23px;
        cursor: pointer;
        text-align: center;
        font-size: 12px;
        font-family: none;
        background: rgba(255, 255, 255, 0.1);
        margin-right: 3px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.1);
        &.active {
          color: #fffbd2;
          background: rgba(219, 201, 3, 0.3);
          border: 1px solid #e6d304;
        }
      }
    }
  }
  .testData {
    position: relative;
    #positionCharts {
      width: 22vw;
      height: 195px;
    }
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .prevent {
    ul {
      height: 90px;
      width: 390px;
      overflow: hidden;
      overflow-y: auto;
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li,
      a {
        display: block;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
      li {
        padding: 0 18px 0 10px;
        cursor: pointer;
        &.isJS {
          background: rgba(0, 178, 176, 0.1);
        }
      }
    }
  }
}
</style>
